<template>
  <div>
    <el-form :model="defaultForm" size="small" label-suffix=":">
      <el-form-item label="是否启用默认规则">
        <el-switch v-model="createDefault" active-text="是" inactive-text="否" />
      </el-form-item>
      <el-form-item label="是否处理默认规则" v-if="defaultForm" prop="process">
        <el-radio-group v-model="defaultForm.process">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-cascader-panel :options="[]" @select="selectItem">
      <el-form :model="form" size="small" label-suffix=":" class="category-form">
        <el-row class="category-head" v-if="currentCategory">
          <h1>{{ currentCategory.label }}</h1>
          <el-button @click="create()" type="primary">创建</el-button>
        </el-row>
        <el-form-item label="是否处理规则" v-if="form" prop="process">
          <el-radio-group v-model="form.process">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-cascader-panel>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'

function createDefaultForm() {
  return { process: false }
}

interface Tree {
  label: string
  value: number
  children: Tree[]
}

interface Form {
  process: boolean
}

interface categoryForm extends Form {
  categoryId: number
}

export default defineComponent({
  name: 'appDetail',
  setup() {
    const defaultForm = ref<Form | null>(null)
    const form = ref<categoryForm | null>(null)
    const currentCategory = ref<Tree | null>(null)

    const createDefault = computed({
      get() {
        return Boolean(defaultForm.value)
      },
      set(val: boolean) {
        if (val) {
          defaultForm.value = createDefaultForm()
        } else {
          defaultForm.value = null
        }
      }
    })

    function selectItem(data: Tree) {
      currentCategory.value = data
    }

    function create() {
      form.value = { ...createDefaultForm(), categoryId: 0 }
    }

    return {
      defaultForm,
      form,
      createDefault,
      currentCategory,
      selectItem,
      create
    }
  }
})
</script>
